<template>
	<!--<div class="login-wrapper" :style='{"background-image":"url("+ imgUrl +")"}'>-->
	<div class="login-wrapper">
		<img :src="imgUrl" class="imgClass"/>
		<div id="bgMB"></div>
	<div class="login-bg">
		<div class="login-box">
			<div class="user-phone-wrap">
				<img v-if='weChatLogin' src="" @click="handleScanCodeLogin"/>
				<div class="top-area">
					<div class="top-area-logo">
						<img :src="logoUrl"/>
					</div>
					<div class="top-area-border"></div>
					<div class="top-area-title">
						{{systemTitle}}
					</div>
				</div>
				<div class="middle-area">
					<div class="userLoginClick" @click="clickedUserLogin">用户名登录</div>
					<div class="phoneLoginClick" @click="clickedPhoneLogin" v-if="phoneLogin">手机验证登录</div>
				</div>
				<div class="bottom-area">
					<!--用户名登录-->
					<div class="UserLogin">
						<div class="form-area">
              				<el-form class="form" :model="userData" :rules="ruleInline" >
								<el-row>
									<el-col :span="24">
									<el-form-item prop="username">
										<el-input v-model="userData.username" placeholder="请输入用户名" clearable style="width: 320px" size="large"/>
									</el-form-item>
									</el-col>
								</el-row>
								<div class="height6"></div>
								<el-row>
									<el-col :span="24">
									<el-form-item prop="password">
										<el-input v-model="userData.password" type="password" @on-keydown="enterkeydown($event)" placeholder="请输入密码" clearable style="width: 320px" size="large"/>
									</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<div class="RememberAndForget">
							<el-checkbox v-model="single" class="el-checkboxStyle">记住密码</el-checkbox>
							<!--<span class="forgetpwd" @click="forgetPwd">忘记密码</span>-->
						</div>
						<div class="loginBtn">
							<el-button type="primary" size='large' style="height: 40px;width:325px;" @click="submit" :loading='loginLoading'>登录</el-button>
						</div>
					</div>
					<!--手机登录-->
					<div class="PhoneLogin">
						<div class="form-area">
							<el-form class="form" ref="phoneData" :model="phoneData" :rules="phoneValid">
								<el-row>
									<el-col :span="24">
									<el-form-item prop="phoneNumber">
										<el-input v-model="phoneData.phoneNumber" placeholder="请输入手机号" :maxlength='phonelength' clearable style="width: 320px" size="large"/>
									</el-form-item>
									</el-col>
								</el-row>
								<div class="height6"></div>
								<el-row>
									<el-col :span="15">
									<el-form-item prop="ValidateCode">
										<el-input v-model="phoneData.ValidateCode" placeholder="请输入验证码" clearable size="large"/>
									</el-form-item>
									</el-col>
									<el-col :span="9">
										<el-button class="sendCodeBtn" @click="sendCode">
											<span v-if="sendcode">点击发送验证码</span>
											<span v-if="!sendcode">{{ this.sendtime }} 秒后重新发送</span>
										</el-button>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<div class="loginBtn">
							<el-button type="primary" long size='large' style="height: 40px;width:325px;" @click="phoneSubmit" :loading='loginLoading'>登录</el-button>
						</div>
					</div>
				</div>
				<div class="oneLineOfSmallcharacters">
					{{systemInfo}}
				</div>
			</div>
			<!--二维码登录-->
			<div class="ScanCodeLogin">
				<img src="" @click="handleUserAndPhoneLogin"/>
				<div class="scan-code-middle-area">
					<div class="right-top"></div>
					<div class="left-top"></div>
					<div class="right-bottom"></div>
					<div class="left-bottom"></div>
					<div class="QR-code-area"  id="login_container">

					</div>
				</div>
				<div class="scan-code-tip-area">
					扫码登录
				</div>
				<div class="scan-code-bottom-area">
					{{systemInfo}}
				</div>
			</div>
		</div>
		<div class="login-box-bg"></div>
	</div>
	</div>
</template>

<script>

	export default{
		data(){
			const validPhoneNumber = (rule, value, callback) => {
				let tempVal = value.toString().replace(/\s/g, '');
				if(tempVal != '') {
					var ret = /^1[345789]\d{9}$/;
					if(ret.test(value)) {
						callback();
					} else {
						callback(new Error("手机号格式不正确"));
					}
				} else {
					callback(new Error("手机号不能为空"));
				}
			};
			return{
				phoneLogin:true,
				weChatLogin:true,
				screenHeight:0,
				screenWidth:0,
				imgWidth:null,
				imgHeight:null,
				imgUrl:'../../../../../static/backend2.jpg',
				logoUrl:'',
				systemTitle:'',
				systemInfo:'',
				userData:{
					username:'',
					password:''
				},
				phoneData:{
					phoneNumber:'',
					ValidateCode:''
				},
				ruleInline: {
					username: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}]
					/*,
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}]*/
				},
				phoneValid: {
					phoneNumber: [{
						required: true,
						validator: validPhoneNumber,
						trigger: "blur"
					}],
					ValidateCode: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}]
				},
				single:false,
				sendcode:true,
				sendtime:60,
				loginLoading:false,
				phonelength:11,
				appid:"",
				redirect_uri:"",
				tempWeiXinCode:{
					code:''
				},
				isDefaultpw:false,
				defaultpw:'',
				bgimg:null,
				rememberedAccount:'',
			}
		},
		watch: {
			systemTitle(val,oldVal){
				if(val.length > 15){
					$('.top-area-title').css({
						'fontSize':'16px'
					})
				}
				if(val.length <= 14){
					$('.top-area').css({
						'left':'40px'
					})
				}
			},
			// screenHeight:{
			// 	handler(val,oldval){
			//         this.screenHeight = val
			//         let screenRatio = this.screenHeight / this.screenWidth;
			// 		let imgRatio = this.imgHeight/this.imgWidth;
			// 		if(screenRatio < imgRatio){
			// 			$('.imgClass').css('height','')
			// 			$('.imgClass').css('width','100%')
			// 		}else{
			// 			$('.imgClass').css('width','')
			// 			$('.imgClass').css('height','100%')
			// 		}
			// 	},
			// 	deep:true,
	        // },
	        // screenWidth:{
	        // 	handler(val,oldval){
	        // 		this.screenWidth = val
			// 		let screenRatio = this.screenHeight / this.screenWidth;
			// 		let imgRatio = this.imgHeight/this.imgWidth;
			// 		if(screenRatio < imgRatio){
			// 			$('.imgClass').css('height','')
			// 			$('.imgClass').css('width','100%')
			// 		}else{
			// 			$('.imgClass').css('width','')
			// 			$('.imgClass').css('height','100%')
			// 		}
	        // 	},
	        // 	deep:true,
	        // },
			'bgimg.complete':{
				handler(val, oldVal) {
				},
				deep: true,
			},
			'userData.password'(nv,ov){
				if(nv==ov||ov==''||ov==null){
					return;
				}
				this.isDefaultpw = false;
			},
			// 'userData.username':{
			
			
			// },
		},
		methods:{
			getBackgroundInfo(){
			
			},
			setBackground(imgUrl){
				$('#bgMB').animate({
					zIndex:0,
					opacity:0
				},1000)
//				$('.login-bg').css('background-image',"url("+this.imgUrl+")");
			},
			clickedUserLogin(){
				$('.phoneLoginClick').css({
					'fontSize':'20px',
					'color':'rgba(153,153,153,1)'
				});
				$('.userLoginClick').css({
					'fontSize':'22px',
					'color':'rgba(51,51,51,1)'
				});
				$('.PhoneLogin').css('display','none');
				$('.UserLogin').css('display','block');
			},
			clickedPhoneLogin(){
				$('.userLoginClick').css({
					'fontSize':'20px',
					'color':'rgba(153,153,153,1)'
				});
				$('.phoneLoginClick').css({
					'fontSize':'22px',
					'color':'rgba(51,51,51,1)'
				});
				$('.UserLogin').css('display','none');
				$('.PhoneLogin').css('display','block');
			},
			handleScanCodeLogin(){
			
			},
			handleUserAndPhoneLogin(){
				$('.ScanCodeLogin').css('zIndex','11')
			},
			enterkeydown($event){
				if($event.keyCode==13){
					this.submit();
				}
			},
			submit(){
				this.$router.push({
             			 path: "/calculator"
				});
			},
			forgetPwd(){
				this.$Message.info('开发中，敬请期待')
			},
			phoneSubmit(){
		
			},
			sendCode(){
			
			},
			setCookie(c_name,c_pwd,exdays) {//设置cookie
			    var exdate=new Date();//获取时间
			    exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
			    //字符串拼接cookie
			    window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();
			    window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();
			},
			getCookie() { //读取cookie
			    if (document.cookie.length>0) {
			        var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
			        for(var i = 0;i < arr.length;i++){
				        var arr2=arr[i].split('=');//再次切割
				        //判断查找相对应的值
				        if(arr2[0]=='userName'){
				            this.userData.username=arr2[1];//保存到保存数据的地方
				            this.rememberedAccount = arr2[1];
				          	if(arr2[1] == ''){
					        	this.single = false;
					        }else{
					        	this.single = true;
					        }
				        }else if(arr2[0]=='userPwd'){
//				            this.userData.password=arr2[1];
							this.userData.password = '********';
							this.isDefaultpw = true;
							this.defaultpw = arr2[1];
				        }
			        }
			    }
			},
			clearCookie() {//清除cookie
			    this.setCookie("","",-1);//修改2值都为空，天数为负1天就好了
			},
		},
		mounted(){
			this.getCookie();
			var width = window.screen.width
			$('.imgClass').css('width',width)
			window.onresize = () =>{
		        return (()=>{
		        	//浏览器高度
		            window.screenHeight = window.innerHeight;
		            this.screenHeight = window.screenHeight;
		            //浏览器宽度
		            window.screenWidth = window.innerWidth;
		            this.screenWidth = window.screenWidth;
		            $('.imgClass').css('width',this.screenWidth)
		        })()
			}
		this.setBackground();

		},
		created(){
			this.getBackgroundInfo();
		},
	}
</script>

<style scoped="scoped" lang="less">
.login-wrapper{
	width: 100%;
	height: 100%;
	/*background-image: url(../../../../../../static/img/bg.png);*/
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	position: absolute;
	.imgClass{
		position:fixed;
		top:0;
		z-index:5;
	}
	#bgMB{
		width: 100%;
		height: 100%;
		position:fixed;
		top:0;
		z-index:6;
		background-color: #888;
	}
}

.login-bg{
	/*position:fixed;
	top:0;
	left:0;
	z-index:5;*/
	width: 100%;
	height: 100%;
	opacity: 1;
}
.login-box{
	width: 400px;
	height: 500px;
	box-shadow:0px 10px 20px 0px rgba(0,0,0,0.1);
	border-radius:8px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15%;
	margin: auto;
	z-index: 10;
}
.login-box-bg{
	width:384px;
	height:446px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	opacity:0.7;
	position: absolute;
	top: -68px;
	bottom: 0;
	right: 15%;
	margin: auto;
	margin-right: 8px;
	z-index: 9;
}
.user-phone-wrap{
	width: 400px;
	height: 500px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	z-index: 12;
	position: absolute;
	left: 0;
	top: 0;
}
.user-phone-wrap>img{
	position: absolute;
	top: 0;
	right: 0;
	border-top-right-radius: 8px;
	cursor: pointer;
}
.top-area{
	width: 340px;
	height: 36px;
	position: absolute;
	top: 65px;
	left: 30px;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
}
.top-area-logo{
	// width: 145px;
	height: 36px;
	// position: absolute;
	// top: 0;
	// left: 0;
}
.top-area-logo>img{
	height: 36px;
	// float: right;
}
.top-area-border{
	width: 1px;
	height: 24px;
	background:rgba(232,232,232,1);
	margin: 0 7px;
	// position: absolute;
	// top: 4px;
	// left: 153px;
}
.top-area-title{
	// width: 108px;
	height: 20px;
	// position: absolute;
	// right: 0;
	// top: 6px;
	font-size:18px;
	font-family:'MicrosoftYaHei';
	color:rgba(51,51,51,1);
	line-height:20px;
}
.middle-area{
	width: 262px;
	height: 29px;
	position: absolute;
	top: 150px;
	left: 63px;
}
.userLoginClick{
	width: 110px;
	height: 29px;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size:22px;
	font-family:'MicrosoftYaHei';
	color:rgba(51,51,51,1);
	line-height:26px;
	cursor: pointer;
}
.phoneLoginClick{
	width: 132px;
	height: 29px;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size:20px;
	font-family:'MicrosoftYaHei';
	color:rgba(153,153,153,1);
	line-height:26px;
	cursor: pointer;
}
.bottom-area{
	width: 320px;
	height: 186px;
	position: absolute;
	bottom: 99px;
	left: 40px;
}
.oneLineOfSmallcharacters{
	width: 100%;
	height: 40px;
	text-align: center;
	font-size:12px;
	font-family:'MicrosoftYaHei';
	color:rgba(153,153,153,1);
	line-height:20px;
	position: absolute;
	bottom: 14px;
}
.UserLogin{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.PhoneLogin{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}
.loginBtn{
	width: 100%;
	height: 30px;
	line-height: 40px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.form-area{

}
.RememberAndForget{
	width: 100%;
	height: 18px;
	font-size:12px;
	line-height:16px;
	position: relative;
}
.el-checkboxStyle{
	color:rgba(51,51,51,1);
}
.forgetpwd{
	position: absolute;
	top: 0;
	right: 0;
	width:48px;
	height:18px;
	font-family:'SourceHanSansCN-Normal';
	font-weight:400;
	color:rgba(136,136,136,1);
	line-height:18px;
	cursor: pointer;
}
.height6{
	height: 6px;
}
.sendCodeBtn{
	width: 112px;
	height: 32px;
	text-align: center;
	font-size:12px;
	margin-left: 7px;
	margin-top: 2px;
}
/deep/.ivu-btn{
	padding: 0;
}
.ScanCodeLogin{
	width: 400px;
	height: 500px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	z-index: 11;
	position: absolute;
	left: 0;
	top: 0;
}
.ScanCodeLogin img{
	position: absolute;
	top: 0;
	right: 0;
	border-top-right-radius: 8px;
	cursor: pointer;
}
.scan-code-middle-area{
	width: 180px;
	height: 180px;
	position: absolute;
	left: 0;
	right: 0;
	top: -47px;
	bottom: 0;
	margin: auto;
}
.right-top{
	width: 13px;
	height: 13px;
	position: absolute;
	right: 0;
	top: 0;
	border-top: 1px solid rgba(0,0,0,0.6);
	border-right: 1px solid rgba(0,0,0,0.6);
}
.left-top{
	width: 13px;
	height: 13px;
	position: absolute;
	left: 0;
	top: 0;
	border-top: 1px solid rgba(0,0,0,0.6);
	border-left: 1px solid rgba(0,0,0,0.6);
}
.right-bottom{
	width: 13px;
	height: 13px;
	position: absolute;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid rgba(0,0,0,0.6);
	border-right: 1px solid rgba(0,0,0,0.6);
}
.left-bottom{
	width: 13px;
	height: 13px;
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: 1px solid rgba(0,0,0,0.6);
	border-left: 1px solid rgba(0,0,0,0.6);
}
.QR-code-area{
	width: 150px;
	height: 150px;
	position: absolute;
	top: 23px;
	left: -60px;
}
.scan-code-tip-area{
	width: 88px;
	height: 29px;
	font-size:22px;
	font-family:MicrosoftYaHei;
	color:rgba(51,51,51,1);
	line-height:29px;
	position: absolute;
	bottom: 127px;
	left: 156px;
}
.scan-code-bottom-area{
	width: 100%;
	height: 40px;
	text-align: center;
	font-size:12px;
	font-family:'MicrosoftYaHei';
	color:rgba(153,153,153,1);
	line-height:20px;
	position: absolute;
	bottom: 14px;
}

</style>
